<template>
    <div class="top-list">
        <!-- <h3>热歌榜</h3> -->
        <!-- <component is="组件名称"></component> -->
        <!-- 榜单导航 -->
        <nav>
            <ul>
                <li v-for="(item, i) in topList">
                    <router-link active-class="active" :to="`/home/hotmusic/toplist/${item.id}`">
                        <span>{{ item.name | showNavText }}</span>
                    </router-link>
                </li>
                <!-- <li>
                    <router-link to="/more"><span>更多 &gt;</span></router-link>
                </li> -->
            </ul>
        </nav>
        <!-- 榜单内容 -->
        <section>
            <div class="img-box">
                <img v-if="coverImgUrl" :src="coverImgUrl" alt="">
            </div>
        </section>
        <section>
            <router-view></router-view>
        </section>

       
    </div>
</template>
<style lang="scss">
@import '../../../static/style/variable.scss';

.img-box {
    width: 100%;
    height: 180px;
    text-align: center;
    line-height: 180px;
    overflow: hidden;
    position: relative;

    img {
        width: 100%;
        vertical-align: middle;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.top-list {
    width: 100%;
    padding: $pad;
    box-sizing: border-box;

    nav {
        width: 100%;

        ul {
            width: 100%;
            padding: .1333rem 0 ;
            // display: flex;
            // flex-wrap: wrap;
            display: grid;
            grid-template-rows: repeat(1,1.3333rem);
            grid-template-columns: repeat(4,25%);
            li {
                a {
                    display: block;
                    padding: 5px;
                    span {
                        display: block;
                        padding: 10px 5px;
                        text-align: center;
                        box-sizing: border-box;
                        // border: 1px solid #ccc;
                        box-shadow: 0 2px 2px #ccc;
                    }
                }

                .active {
                    span {
                        background-color: $bgColor;
                        // box-shadow: 0 2px 2px $bsActiveColor;
                        color: #fff;
                    }
                }
            }
        }
    }
}
</style>
<script>
import { addTopList } from '@/request'

export default {
    name: 'hotmusic',
    data() {
        return {
            allTopList: [],
            topList: [],
            coverImgUrl: '',
            index: 0,
           
        }
    },
    filters:{
        showNavText(value){
            return value.slice(-3);
        }
    },
    watch: {
        // 监听路由变化
        $route: {
            deep: true,
            handler(n, o) {
                let id = n.params.id;
                console.log('xxx:', id);
                for (let i = 0; i < this.topList.length; i++) {
                    if (id == this.topList[i].id) {
                        this.index = i;
                        this.coverImgUrl = this.topList[i].coverImgUrl;
                    }
                }
            }
        }
    },
    created() {
        // 初始化页面数据
        this.getAllTopList();
        // console.log(this.$route)
    },
    methods: {
        // 获取所有绑定
        async getAllTopList() {
            await addTopList().then(content => {
                // console.log(content)
                let { code, list } = content;
                if (code == 200) {
                    if (list && Array.isArray(list)) {
                        // console.log(list);
                        // 整合数据
                        let arr = list.map((item, i) => {
                            // 结构赋值
                            let { id, name, description, ToplistType, coverImgUrl, updateFrequency, createTime } = item;
                            // 返回对象
                            return { id, name, description, ToplistType, coverImgUrl, updateFrequency, createTime };
                        })
                        // console.log(arr);
                        // 获取所有歌榜
                        this.allTopList = arr;
                        // 默认渲染4个歌榜
                        this.topList = arr.slice(0, 8);
                        this.coverImgUrl = arr[0].coverImgUrl;
                        // 默认跳转 ‘飙升榜’
                        this.$router.push({
                                path: '/home/hotmusic/toplist/' + this.topList[0].id
                            })
                    }
                }
            })
                .catch(
                    err => {
                        console.log(err);
                    }
                )
        }
    },
    // beforeRouteEnter(to, from, next) {
    //     next()
    // }
}
</script>